<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{font-family: "Microsoft YaHei",serif;}
			body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
			ol,ul,li{margin:0;padding:0;list-style:none;}
			img{border:none;}
			
			#wrap{
				width: 200px;
				border: 1px solid black; 
				margin: 100px auto 0;
				user-select:none;
			}
			.title{
				text-align: center;
				font-size: 15px;
				background-color: pink;
			}
			.list>li{
				border: 1px dotted #F0F8FF;
				font-size: 12px;
				text-indent: 5px;
			}
			#wrap .list{
				display: none;
			}
			#wrap .love ul.show{
				display: block;
			}
			#wrap div.love+div.love{
				border-top: 1px dotted aqua;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<h3>lion li 的爱好</h3>
			<div class="love">
				<p class="title">爱看的动漫</p>
				<ul class="list">
					<li>火影忍者</li>
					<li>海贼王</li>
					<li>钢之炼金师</li>
					<li>寄生兽</li>
					<li>未闻花名</li>
				</ul>
			</div>
			<div class="love">
				<p class="title">爱看的电影</p>
				<ul class="list">
					<li>这个杀手不太冷</li>
					<li>肖生克的救赎</li>
					<li>教父</li>
					<li>老无所依</li>
				</ul>
			</div>
			<div class="love">
				<p class="title">爱去的城市</p>
				<ul class="list">
					<li>重庆</li>
					<li>青岛</li>
					<li>南京</li>
					<li>绍兴</li>
				</ul>
			</div>
		</div>
		<script type="text/javascript">
			let aList = document.querySelectorAll("#wrap .list"),
				aLove = document.querySelectorAll("#wrap .title");
			let len = aList.length;
			
			for(let i=0;i<len;i++){
				aLove[i].onclick =function(){
					aList[i].classList.toggle("show");
				}	
				/*
				if(j===i){
					aList[j].classList.add("show");
				}else{
					aList[j].classList.remove("show");
				}
				
				*/
			}			
		</script>
	</body>
</html>
